<template>
  <view class="board-box">
    <view class="board-title">
      <view>总体目标</view>
      <uv-icon
        :name="iconFunnel"
        label="筛选"
        label-color="#4EA770"
        label-size="28rpx"
        @click="filterData"
      />
    </view>
    <view class="board-chart">
      <qiun-data-charts
        class="chart-ring"
        type="ring"
        :opts="opts"
        :chartData="chartData"
      />
      <view class="chart-count">
        <view class="chart-count-label">目标任务<span style="font-size: 80%;">（个）</span></view>
        <view class="chart-count-value">
          <uv-count-to
            :startVal="0"
            :endVal="currentProject.numberOfTasks"
            color="#212121"
            font-size="46rpx"
            bold
          />
        </view>
        <view class="chart-count-label">完成目标<span style="font-size: 80%;">（个）</span></view>
        <view class="chart-count-value">
          <uv-count-to
            :startVal="0"
            :endVal="currentProject.totalCompleted"
            color="#212121"
            font-size="46rpx"
            bold
          />
        </view>
      </view>
    </view>
    <view class="board-title">项目完成排名</view>
    <view v-for="(i, k) in dataList" :key="k" class="board-item" @click="handleDetail(i)">
      <view class="board-item-index">{{ k + 1 > 9 ? k + 1 : "0" + (k + 1) }}</view>
      <uv-text :lines="2" :text="i.projectName" bold color="#212121" size="28rpx" />
      <view class="board-item-row">
        <text>总：</text>
        <text>{{ i.numberOfTasks }}</text>
        <text>已完成：</text>
        <text>{{ i.totalCompleted }}</text>
      </view>
      <uv-line-progress
        :percentage="i.totalProgress"
        :show-text="false"
        height="20rpx"
        active-color="#4EA770"
      />
      <view class="board-item-view" v-if="i.children?.length > 0">
        <view v-for="(j, k) in i.children" :key="k">
          <text>{{ j.name }}：</text>
          <text>{{ j.num }}</text>
          <text>完成：</text>
          <text>{{ j.finished }}</text>
        </view>
      </view>
    </view>
    <uv-load-more v-if="dataList.length > 0" :status="status" line />
    <uv-empty v-else margin-top="20vh" :icon="empty" text="还没有安排项目任务哦" />
    <uv-picker
      ref="projectRef"
      round="20rpx"
      title="选择项目"
      :columns="projectList"
      confirm-color="#4EA770"
      key-name="name"
      @confirm="confirmProject"
    />
  </view>
</template>
<script setup>
import { ref, onMounted, watch } from "vue";
import { getProjectList, getOverall, getRanking } from "@/request/home.js";
import iconFunnel from "@/static/icon_funnel.png";
import empty from "@/static/empty.png";

const props = defineProps({
  // 是否下拉刷新
  refresh: {
    type: Boolean,
    default: false,
  },
  // 上拉加载
  onMore: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(["onRefresh", "onReach"]);

const chartData = ref({}); // 图表数据
const opts = ref({
  rotate: false, // 是否横屏
  rotateLock: false, // 横屏锁定
  color: [
    // 主题颜色
    "#4EA770",
    "#D9D9D9",
  ],
  padding: [5, 5, 5, 5], // 图表内边距
  dataLabel: false, // 是否显示数据标签
  enableScroll: false, // 开启滚动条，X轴配置里需要配置itemCount单屏幕数据点数量
  legend: {
    show: false, // 是否显示图例
    position: "right", // 图例位置
    lineHeight: 25, // 图例行高度
  },
  title: {
    name: "完成度", // 标题
    fontSize: 12, // 标题大小
    color: "#757575", // 标题颜色
  },
  subtitle: {
    name: "0%", // 副标题
    fontSize: 18, // 副标题大小
    color: "#212121", // 副标题颜色
  },
  extra: {
    ring: {
      ringWidth: 30, // 圆环宽度
      centerColor: "#fff", // 圆环中心颜色
      activeOpacity: 1, // Tooltip突出部分的透明度
      activeRadius: 0, // Tooltip突出部分的宽度
      offsetAngle: -90, // 图标偏移角度
      border: true, // 显示分割线
      borderWidth: 8, // 分割线宽度
      borderColor: "#FFFFFF", // 分割线颜色
    },
  },
});
const queryParams = ref({
  pageNum: 1, // 页数
  pageSize: 10, // 每页数量
});
const total = ref(0); // 总条数
const status = ref("loadmore"); // 加载状态
const dataList = ref([]); // 项目完成列表
const projectRef = ref(); // 项目筛选ref
const projectList = ref([[]]); // 项目列表
const projectIndex = ref(0); // 项目索引
const currentProject = ref({}); // 当前项目

onMounted(() => {
  getProject();
  getList();
});

watch(
  props,
  (v) => {
    if (v.refresh) {
      setTimeout(() => {
        queryParams.value.pageNum = 1;
        getList();
      }, 0);
    }
    if (v.onMore) {
      if (total.value > dataList.value.length) {
        queryParams.value.pageNum += 1;
        getList();
      }
    }
  },
  { immediate: true, deep: true }
);

// 获取数据列表
const getList = () => {
  status.value = "loading";
  getRanking(queryParams.value)
    .then((res) => {
      if (res.code == 200) {
        let list = res.rows;
        list.forEach((i) => {
          i.children = [];
          if (i.numberOfMonthlyInspectionTasks) {
            i.children.push({
              name: "月检",
              num: i.numberOfMonthlyInspectionTasks,
              finished: i.monthlyInspectionCompletedQuantity,
            });
          }
          if (i.numberOfQuarterlyInspectionTasks) {
            i.children.push({
              name: "季检",
              num: i.numberOfQuarterlyInspectionTasks,
              finished: i.quarterlyInspectionCompletedQuantity,
            });
          }
          if (i.numberOfSemiAnnualInspectionTasks) {
            i.children.push({
              name: "半年检",
              num: i.numberOfSemiAnnualInspectionTasks,
              finished: i.semiAnnualInspectionCompletedQuantity,
            });
          }
          if (i.numberOfAnnualInspectionTasks) {
            i.children.push({
              name: "年检",
              num: i.numberOfAnnualInspectionTasks,
              finished: i.annualInspectionCompletedQuantity,
            });
          }
          if (i.numberOfBienniallyInspectionTasks) {
            i.children.push({
              name: "两年检",
              num: i.numberOfBienniallyInspectionTasks,
              finished: i.bienniallyInspectionCompletedQuantity,
            });
          }
        });
        dataList.value =
          queryParams.value.pageNum == 1 ? list : dataList.value.concat(list);
        total.value = res.total;
      }
    })
    .finally(() => {
      emit("onRefresh", false);
      uni.stopPullDownRefresh();
      status.value = total.value == dataList.value.length ? "nomore" : "loadmore";
      if (props.onMore) emit("onReach", false);
    });
};

// 获取项目列表
const getProject = () => {
  getProjectList().then((res) => {
    if (res.code == 200) {
      projectList.value[0] = res.data;
      projectIndex.value = res.data.length > 0 ? 0 : -1;
      getEcharts();
    }
  });
};

// 获取图表数据
const getEcharts = () => {
  chartData.value = {};
  getOverall().then((res) => {
    if (res.code == 200) {
      if (projectIndex.value != -1) {
        let row = res.data[projectIndex.value];
        let temp = {
          series: [
            {
              data: [
                { name: "完成目标", value: row.totalCompleted },
                { name: "目标任务", value: row.numberOfTasks },
              ],
            },
          ],
        };
        chartData.value = temp;
        currentProject.value = row;
        opts.value.subtitle.name =
          (row.totalCompleted / row.numberOfTasks).toFixed(0) * 100 + "%";
      }
    }
  });
};

// 项目详情
const handleDetail = (item) => {
  uni.navigateTo({
    url: "/pages/Home/boardDetail?id=" + item.id,
  });
};

// 筛选项目
const filterData = () => {
  projectRef.value.open();
};

// 确认筛选
const confirmProject = (e) => {
  projectIndex.value = e.indexs[0];
  currentProject.value = e.value[0];
  getEcharts();
};
</script>
<style lang="scss" scoped>
.board-box {
  width: auto;
  min-height: 500rpx;
  background: #fff;
  border-radius: 20rpx;
  margin: 40rpx;
  padding: 20rpx;
  background: #ffffff;
  box-shadow: 0 0 20rpx 2rpx rgba(117, 117, 117, 0.16);
  .board-title {
    font-weight: 600;
    font-size: 28rpx;
    color: #212121;
    line-height: 80rpx;
    padding-left: 40rpx;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    &::before {
      content: "";
      position: absolute;
      left: 10rpx;
      top: calc(50% - 20rpx);
      border-radius: 10rpx;
      width: 12rpx;
      height: 40rpx;
      background: #4ea770;
    }
  }
  .board-chart {
    height: 300rpx;
    display: flex;
    .chart-ring {
      width: 360rpx;
    }
    .chart-count {
      flex: 1;
      .chart-count-label {
        line-height: 70rpx;
        font-size: 28rpx;
        color: #757575;
      }
    }
  }
  .board-item {
    border: 2rpx solid #e8e8e8;
    border-radius: 12rpx;
    padding: 60rpx 20rpx 20rpx;
    position: relative;
    overflow: hidden;
    margin-bottom: 20rpx;
    &-index {
      position: absolute;
      left: 0;
      top: 0;
      padding: 2rpx 26rpx;
      background-color: #4ea770;
      font-size: 28rpx;
      color: #fff;
      border-bottom-right-radius: 12rpx;
    }
    &-row {
      text {
        line-height: 70rpx;
        color: #757575;
        font-size: 28rpx;
        &:nth-child(2) {
          color: #fe5353;
          margin-right: 40rpx;
        }
        &:last-child {
          color: #4ea770;
        }
      }
    }
    &-view {
      border-top: 2rpx solid #dedede;
      margin-top: 32rpx;
      text {
        line-height: 70rpx;
        color: #757575;
        font-size: 28rpx;
        &:nth-child(2) {
          color: #757575;
          margin-right: 40rpx;
        }
        &:last-child {
          color: #757575;
        }
      }
    }
  }
}
</style>
